<template>
  <div class="test-page" :class="themeClass">
    <!-- 页面标题 -->
    <h1 class="page-title">Sprite 图标测试页面</h1>

    <!-- 完整图标网格 -->
    <div class="test-section">
      <h2 class="section-title">完整图标列表</h2>
      <div class="icon-grid">
        <div v-for="iconName in iconList" :key="iconName" class="icon-item" @click="selectIcon(iconName)"
          :class="{ active: selectedIcon === iconName }">
          <div class="icon-container">
            <TheIcon :icon="iconName" size="large" clickable @click="selectIcon(iconName)" />
          </div>
          <span class="icon-name">{{ iconName }}</span>
        </div>
      </div>
    </div>

    <!-- 选中图标信息 -->
    <div v-if="selectedIcon" class="test-section">
      <h2 class="section-title">当前选中图标</h2>
      <div class="selected-display">
        <div class="selected-icon-showcase">
          <TheIcon :icon="selectedIcon" size="xl" hoverable />
        </div>
        <div class="selected-details">
          <p><strong>图标名称：</strong>{{ selectedIcon }}</p>
          <p><strong>主题模式：</strong>{{ $store.state.theme === 'light' ? '浅色模式' : '深色模式' }}</p>
          <div class="selected-variants">
            <div class="variant-row">
              <div class="variant-group">
                <h4>不同颜色展示：</h4>
                <div class="variant-showcase">
                  <TheIcon v-for="variant in variantOptions" :key="`selected-${variant}`" :icon="selectedIcon"
                    :variant="variant" size="large" hoverable :title="getVariantLabel(variant)" />
                </div>
              </div>
              <div class="variant-group">
                <h4>不同尺寸展示：</h4>
                <div class="size-showcase">
                  <TheIcon v-for="size in sizeOptions" :key="`selected-size-${size}`" :icon="selectedIcon" :size="size"
                    hoverable :title="getSizeLabel(size)" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>



    <!-- 交互状态测试区域 -->
    <div class="test-section">
      <h2 class="section-title">交互状态测试</h2>
      <div class="interaction-test-grid">
        <div class="interaction-test-item">
          <div class="interaction-label">可点击图标</div>
          <div class="interaction-icons">
            <TheIcon v-for="iconName in iconList.slice(0, 4)" :key="`clickable-${iconName}`" :icon="iconName"
              variant="primary" size="large" clickable @click="handleIconClick(iconName)" />
          </div>
        </div>
        <div class="interaction-test-item">
          <div class="interaction-label">禁用状态</div>
          <div class="interaction-icons">
            <TheIcon v-for="iconName in iconList.slice(0, 4)" :key="`disabled-${iconName}`" :icon="iconName"
              variant="secondary" size="large" disabled />
          </div>
        </div>
        <div class="interaction-test-item">
          <div class="interaction-label">无悬停效果</div>
          <div class="interaction-icons">
            <TheIcon v-for="iconName in iconList.slice(0, 4)" :key="`no-hover-${iconName}`" :icon="iconName"
              variant="muted" size="large" :hoverable="false" />
          </div>
        </div>
      </div>
    </div>

    <!-- 点击记录 -->
    <div v-if="clickedIcons.length > 0" class="test-section">
      <h2 class="section-title">点击记录</h2>
      <div class="click-history">
        <div v-for="(click, index) in clickedIcons" :key="index" class="click-item">
          <TheIcon :icon="click.name" variant="success" size="medium" />
          <span class="click-info">{{ click.name }} - {{ click.time }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TheIcon from '~/components/TheIcon.vue'

export default {
  name: 'TestPage',
  layout: false,
  auth: false,

  components: {
    TheIcon
  },

  data() {
    return {
      selectedIcon: null,
      hoveredIcon: null,
      iconList: [
        'user',
        'sun',
        'moon',
        'shopping-cart',
        'search',
        'card',
        'favorite',
        'return',
        'shipping',
        'time-24'
      ],
      sizeOptions: ['small', 'medium', 'large', 'xl', 20, 40],
      variantOptions: ['default', 'primary', 'secondary', 'success', 'warning', 'danger', 'muted'],
      clickedIcons: []
    }
  },

  computed: {
    themeClass() {
      return `theme-${this.$store.state.theme}`;
    }
  },

  methods: {
    toggleTheme() {
      this.$store.commit('TOGGLE_THEME');
    },

    selectIcon(iconName) {
      this.selectedIcon = iconName;
    },

    handleIconClick(iconName) {
      this.clickedIcons.push({
        name: iconName,
        time: new Date().toLocaleTimeString()
      });
      // 只保留最近5次点击记录
      if (this.clickedIcons.length > 5) {
        this.clickedIcons.shift();
      }
    },

    getSizeLabel(size) {
      const sizeLabels = {
        small: '小尺寸 (16px)',
        medium: '中等尺寸 (24px)',
        large: '大尺寸 (32px)',
        xl: '超大尺寸 (48px)'
      };
      return sizeLabels[size] || `自定义 (${size}px)`;
    },

    getVariantLabel(variant) {
      const variantLabels = {
        default: '默认',
        primary: '主要',
        secondary: '次要',
        success: '成功',
        warning: '警告',
        danger: '危险',
        muted: '静音'
      };
      return variantLabels[variant] || variant;
    },

    getSelectedIconColor() {
      // 为选中图标返回主题色
      return 'var(--color-primary)';
    }
  }
}
</script>

<style lang="scss" scoped>
.test-page {
  min-height: 100vh;
  padding: var(--spacing-6);
  padding-top: 100px;
  background-color: var(--bg-page);
  color: var(--text-primary);
  transition: all var(--transition);
}

.theme-toggle-container {
  position: fixed;
  top: var(--spacing-4);
  right: var(--spacing-4);
  z-index: 100;
}

.theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  background-color: var(--bg-container);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-base);

  &:hover {
    background-color: var(--bg-overlay);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
  }

  .theme-icon {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    transition: all var(--transition);
  }

  .theme-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
  }

  &:hover .theme-icon {
    transform: rotate(15deg);
    color: var(--color-primary-hover);
  }
}

.page-title {
  text-align: center;
  margin: var(--spacing-8) 0 var(--spacing-6);
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
}

/* 测试区域样式 */
.test-section {
  margin-bottom: var(--spacing-8);
  padding: var(--spacing-6);
  background-color: var(--bg-container);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-base);
}

.section-title {
  margin: 0 0 var(--spacing-4);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: var(--spacing-2);
}

/* 选中图标变体展示样式 */
.variant-row {
  display: flex;
  gap: var(--spacing-6);
  margin-top: var(--spacing-4);
}

.variant-group {
  flex: 1;
}

.variant-group h4 {
  margin: 0 0 var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.variant-showcase {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.size-showcase {
  display: flex;
  gap: var(--spacing-3);
  align-items: center;
  flex-wrap: wrap;
}

/* 交互状态测试样式 */
.interaction-test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-4);
}

.interaction-test-item {
  padding: var(--spacing-4);
  background-color: var(--bg-overlay);
  border-radius: var(--radius-md);
  text-align: center;
}

.interaction-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-3);
}

.interaction-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-3);
}

/* 选中图标样式 */
.selected-display {
  display: flex;
  gap: var(--spacing-6);
  align-items: flex-start;
}

.selected-icon-showcase {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-4);
  background-color: var(--bg-overlay);
  border-radius: var(--radius-md);
  min-width: 100px;
}

.selected-details {
  flex: 1;
}

.selected-details p {
  margin: var(--spacing-2) 0;
  font-size: var(--font-size-base);
  color: var(--text-primary);
}



/* 点击记录样式 */
.click-history {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.click-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background-color: var(--bg-overlay);
  border-radius: var(--radius-md);
  transition: all var(--transition);
}

.click-item:hover {
  background-color: var(--bg-page);
  transform: translateX(4px);
}

.click-info {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-family: monospace;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--spacing-4);
  max-width: 1200px;
  margin: 0 auto;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-3);
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: all var(--transition);

  &:hover {
    transform: translateY(-2px);
    background-color: var(--bg-overlay);
  }

  &.active {
    .icon-name {
      color: var(--color-primary);
      font-weight: 500;
    }
  }
}

.icon-container {
  margin-bottom: var(--spacing-2);
}


.icon-name {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-align: center;
  word-break: break-all;
  line-height: 1.2;
  transition: color var(--transition);
}

.selected-info {
  background-color: var(--bg-container);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  max-width: 500px;
  margin: 0 auto;
  box-shadow: var(--shadow-base);

  h3 {
    margin: 0 0 var(--spacing-4);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
  }
}

.selected-display {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.selected-icon {
  width: 48px;
  height: 48px;
  color: var(--text-primary);
  stroke: var(--text-primary);
  fill: none;
  color: var(--color-primary);
  flex-shrink: 0;
}

.svg-test-section {
  margin: 2rem auto;
  padding: 1rem;
  border: 1px solid var(--border-base);
  border-radius: 8px;
  background-color: var(--bg-container);

  h3 {
    text-align: center;
  }
}

.svg-test-container {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
}

.svg-test-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--border-base);
  border-radius: 4px;
  background-color: var(--bg-overlay);
}

.direct-svg {
  width: 32px;
  height: 32px;
}

.inline-svg {
  color: var(--text-primary);
}

.selected-details {
  p {
    margin: var(--spacing-2) 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);

    strong {
      color: var(--text-primary);
    }
  }
}


// 响应式设计
@media (max-width: 768px) {
  .test-page {
    padding: var(--spacing-4);
  }

  .icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--spacing-3);
  }

  .theme-toggle-container {
    position: relative;
    top: auto;
    right: auto;
    margin-bottom: var(--spacing-4);
    text-align: center;
  }

  .selected-display {
    flex-direction: column;
    text-align: center;
  }
}
</style>